import React, { Component } from 'react'
import Controller from './Controller'
import './CssV.css'

export default class CssV extends Component {

    state = {
        info: [
            {label:"Spacing", name:"spacing", min:"10", max:"200", value:"10"},
            {label:"Blur", name:"blur", min:"0", max:"25", value:"10"},
        ]

    }
  render() {
    const {info} = this.state
    return (
      <div className="container">
        <h2>Update CSS Variables with <span className='hl'>JS</span></h2>

        <div className="controls">
            Spacing: <Controller name="spacing" type="range" suffix="px" defaultValue="100px" max="1000"/> <br/>
            Blur: <Controller name="blur" type="range" suffix="px" defaultValue="10px"/> <br/>
            Base Color: <Controller name="base" type="color" defaultValue="#ffc600"/> <br/>

        </div>

        <img src="./asset/bg.jpg" alt="" />
      </div>
    )
  }
}

